<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>设备报修</title>
		<style>
			html, body {
				margin: 0;
				padding: 0;
				height: 100%;
				background-color: #F0EED9;
				font: normal 100% Helvetica, Arial, sans-serif;
			}
			.container {
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
			}
			.main {
				position: relative;
				margin-left: 2%;
				margin-right: 2%;
				padding-bottom: 3%;
				border-radius: 8px;
				background-color: #fff;
				border-color: #F0F0F0;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				box-shadow: 0 0 3px #F0F0F0;
			}
			.footer {
				margin-left: auto;
				margin-right: auto;
				width: 90%;
				line-height: 1.42857143;
				text-align: left;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
			}
			.btn {
				display: inline-block;
				padding: 6px 12px;
				font-size: 1em;
				font-weight: normal;
				line-height: 1.42857143;
				text-align: center;
				white-space: nowrap;
				vertical-align: middle;
				cursor: pointer;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
				background-image: none;
				border: 1px solid transparent;
				border-radius: 4px;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
			}
			.btn:focus, .btn:active:focus, .btn.active:focus {
				outline: thin dotted;
				outline: 5px auto -webkit-focus-ring-color;
				outline-offset: -2px;
			}
			.btn:hover, .btn:focus {
				color: #333;
				text-decoration: none;
			}
			.btn:active, .btn.active {
				background-image: none;
				outline: 0;
				-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
				box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
			}
			.btn-primary {
				color: #fff;
				background-color: #428bca;
				border-color: #357ebd;
			}
			.btn-primary:hover, .btn-primary:focus {
				color: #fff;
				background-color: #3276b1;
				border-color: #285e8e;
			}
			.btn-success {
				color: #fff;
				background-color: #5cb85c;
				border-color: #4cae4c;
			}
			.btn-success:hover, .btn-success:focus, .btn-success.active {
				color: #fff;
				background-color: #47a447;
				border-color: #398439;
			}
			.btn-success:active, .btn-success.active, .open .dropdown-toggle.btn-success {
				background-image: none;
			}
			.form-group {
				width: 90%;
				margin-left: 8%;
				margin-right: 5%;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
			}
			.label {
				display: block;
				font-weight: bold;
				font-size: 1.1em;
				line-height: 1;
				white-space: nowrap;
				vertical-align: baseline;
				border-radius: .25em;
			}

			.form-control {
				display: inline-block;
				width: 90%;
				font-size: 1.1em;
				padding: 6px 12px;
				line-height: 1.42857143;
				color: #555;
				background-color: #F6F6F6;
				border: 1px solid #ccc;
				border-radius: 6px;
				-webkit-appearance: none;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
			}
			.form-control:focus {
				border-color: #66afe9;
				outline: 0;
			}

			.form-control::-webkit-input-placeholder {
				color: #999;
			}
			textarea.form-control {
				height: auto;
			}
			a {
				outline: none;
				text-decoration: none;
			}
		#circularG {
				display: none;
				position: absolute;
				left: 50%;
				top: 40%;
				width: 80px;
				height: 80px;
				z-index: 1000;
				-webkit-transform: translate(-50%,-50%);
				transform: translate(-50%,-50%);
			}

			.circularG {
				position: absolute;
				background-color: #ccc;
				width: 18px;
				height: 18px;
				-moz-border-radius: 12px;
				-moz-animation-name: bounce_circularG;
				-moz-animation-duration: 1.04s;
				-moz-animation-iteration-count: infinite;
				-moz-animation-direction: linear;
				-webkit-border-radius: 12px;
				-webkit-animation-name: bounce_circularG;
				-webkit-animation-duration: 1.04s;
				-webkit-animation-iteration-count: infinite;
				-webkit-animation-direction: linear;
				-ms-border-radius: 12px;
				-ms-animation-name: bounce_circularG;
				-ms-animation-duration: 1.04s;
				-ms-animation-iteration-count: infinite;
				-ms-animation-direction: linear;
				-o-border-radius: 12px;
				-o-animation-name: bounce_circularG;
				-o-animation-duration: 1.04s;
				-o-animation-iteration-count: infinite;
				-o-animation-direction: linear;
				border-radius: 12px;
				animation-name: bounce_circularG;
				animation-duration: 1.04s;
				animation-iteration-count: infinite;
				animation-direction: linear;
			}

			#circularG_1 {
				left: 0;
				top: 32px;
				-moz-animation-delay: 0.39s;
				-webkit-animation-delay: 0.39s;
				-ms-animation-delay: 0.39s;
				-o-animation-delay: 0.39s;
				animation-delay: 0.39s;
			}

			#circularG_2 {
				left: 8px;
				top: 8px;
				-moz-animation-delay: 0.52s;
				-webkit-animation-delay: 0.52s;
				-ms-animation-delay: 0.52s;
				-o-animation-delay: 0.52s;
				animation-delay: 0.52s;
			}

			#circularG_3 {
				top: 0;
				left: 32px;
				-moz-animation-delay: 0.65s;
				-webkit-animation-delay: 0.65s;
				-ms-animation-delay: 0.65s;
				-o-animation-delay: 0.65s;
				animation-delay: 0.65s;
			}

			#circularG_4 {
				right: 8px;
				top: 8px;
				-moz-animation-delay: 0.78s;
				-webkit-animation-delay: 0.78s;
				-ms-animation-delay: 0.78s;
				-o-animation-delay: 0.78s;
				animation-delay: 0.78s;
			}

			#circularG_5 {
				right: 0;
				top: 32px;
				-moz-animation-delay: 0.91s;
				-webkit-animation-delay: 0.91s;
				-ms-animation-delay: 0.91s;
				-o-animation-delay: 0.91s;
				animation-delay: 0.91s;
			}

			#circularG_6 {
				right: 8px;
				bottom: 8px;
				-moz-animation-delay: 1.04s;
				-webkit-animation-delay: 1.04s;
				-ms-animation-delay: 1.04s;
				-o-animation-delay: 1.04s;
				animation-delay: 1.04s;
			}

			#circularG_7 {
				left: 32px;
				bottom: 0;
				-moz-animation-delay: 1.17s;
				-webkit-animation-delay: 1.17s;
				-ms-animation-delay: 1.17s;
				-o-animation-delay: 1.17s;
				animation-delay: 1.17s;
			}

			#circularG_8 {
				left: 8px;
				bottom: 8px;
				-moz-animation-delay: 1.3s;
				-webkit-animation-delay: 1.3s;
				-ms-animation-delay: 1.3s;
				-o-animation-delay: 1.3s;
				animation-delay: 1.3s;
			}

			@-moz-keyframes bounce_circularG {
				0% {
					-moz-transform: scale(1)
				}

				100% {
					-moz-transform: scale(.3)
				}

			}

			@-webkit-keyframes bounce_circularG {
				0% {
					-webkit-transform: scale(1)
				}

				100% {
					-webkit-transform: scale(.3)
				}

			}

			@-ms-keyframes bounce_circularG{
			0%{
			-ms-transform:scale(1)}

			100%{
			-ms-transform:scale(.3)}

			}

			@-o-keyframes bounce_circularG {
				0% {
					-o-transform: scale(1)
				}

				100% {
					-o-transform: scale(.3)
				}

			}

			@keyframes bounce_circularG {
				0% {
					transform: scale(1)
				}

				100% {
					transform: scale(.3)
				}

			}
			.modal-backdrop {
				display: none;
				position: fixed;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				z-index: 500;
				background-color: #000;
				opacity: .5;
				filter: alpha(opacity=50);
			}
			.message {
				display: none;
				position: absolute;
				top: 50%;
				left: 50%;
				min-width: 30%;
				max-width: 70%;
				padding: 12px;
				border-radius: 5px;
				z-index: 500;
				background-color: #ddd;
				font-size: 1em;
				word-wrap: break-word;
				word-break: break-all;
				-webkit-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
			}
		</style>
	</head>
	<body>
		<div class="container" id="container">
			<!--			<div class="head" id="head"></div>
			-->
			<div class="main" id="main">
				<!--				<div class="logo"></div>
				-->
				<div style="text-align: center; font-size: 1.6em; font-weight: bold;" id="title">
					报修信息
				</div>
				<form id="form">
					<div id="line" style="width:96%;margin-left:auto;margin-right:auto;border-top: 0.1em dashed #cccccc;height: 0.1em;overflow:hidden; "></div>
					<div class="form-group">
						<label class="label">机器序列号:</label>
						<input type="text" id="serialNumber" class="form-control" style="width:90%;">
					</div>
					<div class="form-group" >
						<label class="label">期望维修时间:</label>
						<input type="date" id="date" class="form-control" style="width: 45%; display: inline-block">
						<input type="time" id="time" class="form-control"  style="width: 45%;display: inline-block">
					</div>
                    <div class="form-group">
                        <label class="label" style="vertical-align: top;">故障代码:</label>
                        <input type="text" id="breakCode" class="form-control" style="width:90%;">
                    </div>
					<div class="form-group">
						<label class="label" style="vertical-align: top;">故障信息:</label>
						<textarea id="description" name="description" class="form-control" rows="2"></textarea>
					</div>
					<div class="form-group" style="text-align: right;width: 81%;">
						<button id="button1" type="button" class="btn btn-primary" style="width: 100%;">
							提交报修
						</button>
					</div>
				</form>
			</div>
			<div class="footer" id="footer">
				备注：信息提交成功后，我司将尽快联系你处理。
			</div>
			<div class="message" id="message"></div>
		</div>

		</div>
		<div id="modalBackdrop" class="modal-backdrop">

		</div>
		<div id="circularG">
			<div id="circularG_1" class="circularG"></div>
			<div id="circularG_2" class="circularG"></div>
			<div id="circularG_3" class="circularG"></div>
			<div id="circularG_4" class="circularG"></div>
			<div id="circularG_5" class="circularG"></div>
			<div id="circularG_6" class="circularG"></div>
			<div id="circularG_7" class="circularG"></div>
			<div id="circularG_8" class="circularG"></div>
		</div>
		<script>
			document.body.onload = function() {
				var clientHeight = document.body.clientHeight;
				var modalBackdrop = document.getElementById('modalBackdrop');
				modalBackdrop.style.height = clientHeight;
				modalBackdrop.style.width = document.body.clientWidth;
				var circularG = document.getElementById('circularG');
				
				var container = document.getElementById('container');
				container.style.height = clientHeight + 'px';
				container.style.paddingTop = 0.02*clientHeight + 'px';
				var main = document.getElementById('main');
				main.style.minHeight = 0.88 * clientHeight + 'px';

				var title = document.getElementById('title');
				title.style.paddingTop = 0.04 * clientHeight + 'px';
				title.style.paddingBottom = 0.04 * clientHeight + 'px';
				
				document.getElementById('line').style.paddingBottom = 0.02*clientHeight + 'px';
				
				var formGroups = document.getElementsByClassName('form-group');
				for(var i=0,j=formGroups.length; i<j; i++){
					formGroups[i].style.marginTop = 0.03*clientHeight + 'px';
				}
				var footer = document.getElementById('footer');
				footer.style.height = 0.10 * clientHeight + 'px';
				
				var date = new Date();
				var month = (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1);
				var day = (date.getDate() + 1) < 10 ? '0' + (date.getDate() + 1) : (date.getDate() + 1);
				document.getElementById('date').value = date.getFullYear() + '-' + month + '-' + day;
				document.getElementById('time').value = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':' + (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
				document.getElementById('button1').onclick = function() {
					var serialNumber = document.getElementById('serialNumber');
					if (!serialNumber.value) {
						alert('请输入设备序列号!');
						return;
					}
					var date = document.getElementById('date').value;
					if (!date) {
						alert('请选择日期!')
						return;
					}
					var time = document.getElementById('time').value;
					if (!time) {
						alert('请选择时间!')
						return;
					}
					var expectedRepairTimeStr = date + ' ' + time + ':00';
					if (!serialNumber) {
						alert('请选择日期!');
						return;
					}
					var faultInfo = document.getElementById('description').value.replace(/(^\s*)|(\s*$)/g, "").replace(/</g, '&lt;').replace(/>/g, '&gt;');
//					var form = new FormData();
//					form.append("openId", '${openId}');
//					form.append("serialNumber", serialNumber.value);
//					form.append("expectedRepairTime", expectedRepairTimeStr);
//					form.append("faultInfo", faultInfo);
                    var breakCode = document.getElementById('breakCode').value || '';
					var url = '<%=request.getContextPath()%>/repair/weixin/generateByManuallyEnter'
						+ '?openId=${openId}&serialNumber='+serialNumber.value+'&expectedRepairTime='
						+ expectedRepairTimeStr + '&faultInfo='+faultInfo+"&breakCode="+breakCode;
					var xhr = new XMLHttpRequest();
					xhr.open("post", encodeURI(url), true);
					xhr.onload = function() {
						modalBackdrop.style.display = 'none';
						circularG.style.display = 'none';
						var result = JSON.parse(xhr.response);
						if (result.statusCode == 20011011) {
							window.location.href = '<%=request.getContextPath()%>/weixin/result';
						} else {
							alert(result.msg);
						}
					};
					xhr.send();
					modalBackdrop.style.display = 'block';
					circularG.style.display = 'block';
				}
			}
			alert = function showMessage(msg){
				var message = document.getElementById('message');
				message.style.display = 'block';
				message.innerText = msg;
				setTimeout(function(){
					var i = 0;
					var interValId = setInterval(function(){
						var message = document.getElementById('message');
						if(i > 10){
							clearInterval(interValId);
							message.style.display = 'none';
							message.style.opacity = 1.0;
						}else{
							message.style.opacity = 1.0 - i*0.1;
						}
						i++;
					}, 100);
				}, 2500)
			}
		</script>
	</body>
</html>